<template>
	<view style="position: fixed; bottom: 100upx;width: 100%; z-index: 1001; pointer-events: auto;">
				<view>
					<view v-if="iscomment" class="uni-flex uni-row chead" :class="{br:iscomment}">
						<view class="chead-text">转发并评论 // @{{fowData.nicheng}}</view>
						<uni-icons @click="close" type="closeempty"></uni-icons>
					</view>
					
					<view style="border-bottom: 1upx solid #efefef;" class="uni-flex uni-row inp" :class="{br:!iscomment}">
						<view>
							<input v-model="formData.title" placeholder="请输入标题（5-30个字）" maxlength="30" />
						</view>
						<view>
							<button @click="sendfow">发布</button>
						</view>
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 500upx;background-color: #FFFFFF;">
					<view style="height: 100%; padding: 20upx;">
						<editor class="ql-container" @input="editDes" placeholder="请输入正文" :show-img-size="true" :show-img-toolbar="true" :show-img-resize="true" @ready="onEditorReady" id="editor" @focus="editFocus" @blur="editBlur" ref="editot"></editor>
					</view>
				</scroll-view>
				<view style="background-color: #FFFFFF; width: 100%;">
					<view class="fowBox">
						<view class="uni-flex uni-row">
							<view>
								<image :src="fowData.imgUrl?fowData.imgUrl:'../../static/images/fengmian.png'" mode="aspectFill"></image>
							
							</view>
							<view class="userTit">
								<view>@{{fowData.nicheng?fowData.nicheng:'未设置昵称'}}</view>
								<view>{{fowData.title}}</view>
							</view>
						</view>
					</view>
					<view class="tipc" >
						<view @click="aoes">
							<i class="iconfont iconbiaoqian"></i>
							<text>{{sendTip.aoeName}}</text>
						</view>
						<view @click="nav">
							<i class="iconfont icondaohang"></i>
							<text>{{sendTip.navName}}</text>
						</view>
						<view @click="pos">
							<i class="iconfont iconweizhi"></i>
							<text>{{Desaddress}}</text>
						</view>
					</view>
				</view>
						
				<view class="buttom" >
					<view v-if="tool" class="butoom-btn">
						<view class="showbtn">
							<view @click="seteditor('bold')"><i :class="{selcolor:name=='bold'}" class="iconfont iconbold"></i></view>
							<view @click="seteditor('italic')"><i :class="{selcolor:name=='italic'}" class="iconfont iconi"></i></view>
							<view @click="seteditor('align','left')"><i :class="{selcolor:name=='left'}" class="iconfont iconyouduiqicopy"></i></view>
							<view @click="seteditor('align','center')"><i :class="{selcolor:name=='center'}" class="iconfont iconjuzhong"></i></view>
							<view @click="seteditor('align','right')"><i :class="{selcolor:name=='right'}" class="iconfont iconzuoduiqi"></i></view>
							<view @click="seteditor('list','bullet')"><i :class="{selcolor:name=='bullet'}" class="iconfont icon4liebiao"></i></view>
							<view @click="seteditor('list','ordered')"><i :class="{selcolor:name=='ordered'}" class="iconfont iconyouxuliebiao"></i></view>
						</view>
					</view>
						
					<view class="toolbtn">
						<view @click="insertImage"><i class="iconfont icontupian"></i></view>
						<view @click="insertVideo"><i class="iconfont iconshipin2"></i></view>
						<view @click="toolshow"><i class="iconfont iconwenzi1"></i></view>
						<view @click="insetText"><i class="iconfont iconjinghao"></i></view>
						<!-- <view><i class="iconfont icontabAdd"></i></view> -->
					</view>
				</view>
		
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputOffsetBottom: 0,
				editorCtx: '',
				placeholder: '请输入内容',
				name: '',
				tool: false,
				imglist: [],
				formData: {
					talk: null, //转发文章要说的内容
					title: null, //转发的文章标题
					area: null, //转发的文章内容
				},

				Desaddress: '不显示位置', //详细地址
				iscomment: true

			}
		},
		props: {
			content: String,
			istran: Boolean,
			fowData: Object,
			sendTip: Object,
			obj: String,
			aoe: String
		},
		created() {
			uni.onKeyboardHeightChange(res => {
				this.inputOffsetBottom = res.height
				console.log(this.inputOffsetBottom,"=============================");
				if (res.height === 0) {
					this.focus = false
				} else {
					this.focus = true;
				}
			})
		},
		methods: {
			closetran: function() {
				this.$emit('closetran');
			},
			editFocus: function(e) {
				this.tool = false;
			},
			editInput: function(e) {
				this.$emit('editInput', e);
				this.setImg(e.detail.html);
			},
			// 正则匹配img标签将所有img的src放入数组
			setImg(value) {
				var htmlTxt = value;
				let imgs = [];
				htmlTxt = htmlTxt.replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
					imgs.push(capture);
				});
				this.$emit('getimg', imgs);
			},
			editBlur: function(e) {},
			toolshow: function() {
				this.tool = !this.tool;
			},
			seteditor: function(name, value) {
				if (!name) return
				if (!value) {
					if(this.name==name){
					    this.name ="";
					}else{
					    this.name = name;
					}
				} else {
					if(this.name==value){
					    this.name ="";
					}else{
					    this.name = value;
					}
				}
				this.editorCtx.format(name, value)
			},
			onEditorReady(e) {
				console.log(this.content, "==");
				uni.createSelectorQuery().in(this).select('.ql-container').fields({
					size: true,
					context: true
				}, res => {
					this.editorCtx = res.context;
					this.editorCtx.setContents({
						html: this.content
					})
				}).exec();
			},
			// 插入图片
			insertImage: function() {
				var _this = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async (res) => {
						var tempFilePaths = res.tempFilePaths;
						uni.showLoading({
							title: '正在上传中...'
						})
						for (let temp of tempFilePaths) {
							_this.$uapi.apifile('api/v1/upload', {
								file: temp
							}).then(re => {
								let result = JSON.parse(re.data);
								_this.editorCtx.insertImage({
									src: result.data.fileUrl, // 此处需要将图片地址切换成服务器返回的真实图片地址
									alt: '图片',
									success: function(e) {}
								});
								uni.hideLoading()
							});
						}
					}
				});
			},
			// 强制初始化编辑器
			insetCont: function(value) {
				this.editorCtx.clear(); //清空编辑器
				this.editorCtx.setContents({
					html: value
				})
				this.setImg(value);
			},
			insetText() {
				this.editorCtx.insertText({
					text: '#'
				})
			},
			/* 插入视频 */
			insertVideo() {
				var _this = this;
				uni.chooseVideo({
					count: 1,
					success: res => {
						uni.showLoading({
							title: '上传中'
						});
						_this.$api.apifile('user/currency.basic/UploadVideo', {
							file: res.tempFilePath
						}).then(res => {
							var result = JSON.parse(res.data);
							if (result.code == 200) {
								var url = result.data.visit_path;
								var cont = '<video src="' + url + '"><video>';
								_this.editorCtx.insertText({
									text: cont,
									success: function(res) {}
								});
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								})
							}
							uni.hideLoading();
						})
					}
				});
			},
			aoes() {
				uni.navigateTo({
					url: '/pages/album/look-obj?obj=' + this.obj,
				});
			},
			nav() {
				uni.navigateTo({
					url: '/pages/album/send-aoe?aoe=' + this.aoe,
				});
			},
			pos() {
				let _this = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						_this.Desaddress = res.address
					}
				});
			},

			editDes(e){
				console.log(e);
				this.formData.area = e.target.html
				let _this = this
				uni.createSelectorQuery().select('#editor').context((res) => {
					_this.editorCtx = res.context
				}).exec()
			},
			sendfow() {
				console.log('fowData', this.fowData);
				console.log('formData', this.formData);
				console.log('转发的文章Id', this.fowData.articleId);
				console.log('转发文章要说的内容', this.formData.talk);
				console.log('转发的文章标题', this.formData.title);
				console.log('转发的文章内容', this.formData.area);
				console.log('转发文章标签', this.sendTip.aoeName);
				console.log('转发文章导航', this.sendTip.navName);
				console.log('转发文章地址', this.Desaddress);
				console.log(this.obj);
				console.log(this.aoe);
				let resData = {
					article_id: this.fowData.articleId
				}
				/* 非空判断,不为空,往resData对象添加元素 */
				/* 转发标题 */
				if (this.formData.title) {
					resData.title = this.formData.title
				}
				/* 转发内容 */
				if (this.formData.area) {
					resData.content = this.formData.area
				}
				/* 转发评论内容 */
				if (this.iscomment) {
					// resData.apply_content = this.formData.talk
					resData.apply_content = this.formData.title
				}
				/* 转发地址 */
				if (this.Desaddress) {
					resData.coordinate = this.Desaddress
				}
				/* 观看对象 */
				if (this.obj) {
					resData.Audience_scope = this.obj
				}
				/* 发布范围 */
				if (this.aoe) {
					resData.Release_scope = this.aoe
				}
				console.log('转发文章接口数据',resData);
				uni.showLoading({
					title: '请稍后',
					mask: false
				});
				console.log('title',this.formData.title);
				if(this.formData.title&&this.formData.area){
					this.$api.apiPost('user/article.lists/transmitArticle', resData).then(res => {
						console.log(res);
						const DATA = res.data
						uni.hideLoading()
						if (DATA.code == 200) {
							uni.showToast({
								title: '转发成功！'
							});
							this.formData.title = null
							this.formData.area = null
							this.formData.talk = null
							this.Desaddress = null
							this.editorCtx.clear()
						} else {
							uni.showToast({
								icon: 'none',
								title: '转发失败！'
							});
						}
						this.$emit('closetran');
					})
				}else{
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '评论标题/内容不能为空！'
					});
				}
			},
			close(){
			    this.iscomment = false
			    uni.$emit('newEdit',{iscomment:this.iscomment})
			   }
		}

	}
</script>


<style lang="scss" scoped>
	.br {
		border-radius: 10rpx 10rpx 0 0;
	}

	.chead {
		height: 100upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;

		.chead-text {
			color: #999999;
			font-size: 30upx;
			margin-left: 20upx;
		}

		.uni-icons {
			width: 40upx;
			height: 40upx;
			line-height: 40upx;
			color: #DCDFE6 !important;
			background: #F4F7FC;
			border-radius: 50%;
			padding: 4upx;
			margin-right: 20upx;
		}

	}


	.inp {
		height: 120rpx;
		background-color: #FFFFFF;

		input {
			font-size: 28rpx;
		}

		view:nth-child(1) {
			-webkit-flex: 1;
			flex: 1;
		}


		button {

			margin-top: 20rpx;
			margin-bottom: 20rpx;
			margin-right: 30rpx;
			border-radius: 40rpx;
			width: 120rpx;
			height: 80rpx;
			background-color: #00D5A2;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 80rpx;
		}

		input {
			margin-top: 40rpx;
			margin-bottom: 40rpx;
			margin-left: 30rpx;
		}
	}

	.ql-container {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		word-break:break-all;
		overflow-y: scroll;
	}
	.ql-container .ql-editor{
		overflow-y: scroll;
	}

	.buttom {
		position: fixed;
		width: 100%;
		bottom: 0upx;
		z-index: 9999;
	}

	.butoom-btn {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		top: 10upx;

		.showbtn {
			position: relative;
			margin: auto;
			width: 480upx;
			height: 78upx;
			border-radius: 78upx;
			background-color: #FFFFFF;
			box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.12);
			display: flex;
			justify-content: space-around;
			align-items: center;
			z-index: 9999;

			.selcolor {
				color: #00D5A2;
			}
		}

	}

	.showbtn::before {
		position: absolute;
		bottom: -10upx;
		left: 230upx;
		content: '';
		width: 20upx;
		height: 20upx;
		background: #fff;
		transform: rotate(135deg);
		box-shadow: 1px -2px 5px rgba(0, 0, 0, .2);
	}

	.showbtn::after {
		position: absolute;
		bottom: 0upx;
		left: 225upx;
		content: '';
		width: 30upx;
		height: 20upx;
		background: #fff;
	}

	.toolbtn {
		background-color: #FFFFFF;
		width: 100%;
		height: 100upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.12);

		i {
			font-size: 36upx;
			color: #333333;
		}
	}

	.tipc {
		width: calc(100% - 60upx);
		padding: 10upx 30upx;
		bottom: 100upx;
		background-color: #FFFFFF;
		view {
			height: 25px;
			line-height: 25px;
			background: #00D5A2;
			display: table;
			border-radius: 5px;
			padding: 0px 4px;
			color: #FFFFFF;
			margin-bottom: 10rpx;
		}

		.iconfont {
			font-size: 20rpx;
			/* margin-left: 10rpx;
			margin-right: 10rpx; */
		}

		text {
			font-size: 20rpx;
		}

		view:nth-child(3) {}
	}

	.fowBox {
		width: calc(100% - 60upx);
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;

		image {
			width: 120rpx;
			height: 120rpx;
		}
	}

	.fowBox>view {
		height: 120rpx;
		background-color: #EFEFEF;
	}

	.userTit {
		line-height: 60rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		
		view{
			height: 60rpx;
			color: #333333;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}

		view:nth-child(1) {
			font-size: 28rpx;
		}

		view:nth-child(2) {
			font-size: 24rpx;
			color: #999999;
		}
	}


</style>
